<template>
	<view class="login">
		<uni-forms :modelValue="formData" :rules="rules" ref="form" :label-width="76">
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号">
					<template #right>
						<view style="padding: 0 20rpx">获取验证码</view>
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="确认密码" required name="confirmPassword">
				<uni-easyinput type="password" v-model="formData.confirmPassword" placeholder="再次输入密码" />
			</uni-forms-item>
			<uni-forms-item label="验证码" required name="code">
				<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">提交</button>
	</view>
</template>

<script>
	import { ref } from 'vue'
	
	export default {
		data(){
			return {
				formData: {
					phone: "", // 手机号
					password: "", // 登录密码
					confirmPassword: "", // 二次确认密码
				},
				rules: {
					phone: {
						rules: [{ required: true, errorMessage: '请填写姓名' }, { pattern: '^1[3-9]\\d{9}$', errorMessage: '请填写正确的手机号'}],
					},
					password: {
						rules: [{ required: true, errorMessage: '请填写密码' }, { pattern: '^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}$', errorMessage: '密码要8-20位并包含数字、大写字母、小写字母'}],
					},
					confirmPassword: {
						rules: [{ required: true, errorMessage: '请填写密码' }, { pattern: '^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}$', errorMessage: '密码要8-20位并包含数字、大写字母、小写字母'}],
					},
					code: {
						rules: [{ required: true, errorMessage: '请填写验证码' }],
					}
				}
			}
		},
		methods: {
			submit(){
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped>
	.login{
		padding: 40rpx;
		box-sizing: border-box;
	}
	.reset{
		font-size: 20rpx;
		line-height: 20rpx;
		margin-top: 40rpx;
		color: skyblue;
	}
</style>